<template>
  <div class="blog-detail blog-section card-item" id="blog-section">
    <div class="blog-title">
      <span class="title">{{ blogStore.currentBlog.title }}</span>
      <blog-label :basic-blog="getBasicBlog(blogStore.currentBlog)"/>
    </div>

    <div class="blog-md card-item">
      <MdPreview editorId="blog-id"
                 v-model="blogStore.currentBlog.content"
                 :theme="appStore.isDark ? 'dark' : 'light'"/>
    </div>

    <div class="blog-copyright">
      <span>
        <strong>本文作者: </strong> Cxx
      </span>
      <span>
        <strong>本文链接: </strong>
        <a href="https://www.microsoft.com/">{{ currentUrl.href }}</a>
      </span>
      <span>
        <strong>版权声明: </strong>
        本博客所有文章除特别声明外，均采用
        <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">©BY-NC-SA</a>
        许可协议。转载请注明出处！
      </span>
    </div>

    <div class="blog-ending">
      <span>-------------本文结束♥感谢您的阅读♥给个五星好评吧~~-------------</span>
    </div>

    <div class="blog-navigation">
      <el-row :gutter="20">
        <!-- 上一篇 -->
        <el-col :span="12">
          <div class="nav-item prev">
            <el-icon><ArrowLeft /></el-icon>
            <span class="label">上一篇：</span>
            <router-link v-if="blogStore.blogAdjacentList[0].id !== 0"
                         :to="`/overview/detail/${blogStore.blogAdjacentList[0].id}`"
                         class="blog-navigation-title">
              {{ blogStore.blogAdjacentList[0].title }}
            </router-link>
            <span v-else>
              已经是第一篇了~
            </span>
          </div>
        </el-col>

        <!-- 下一篇 -->
        <el-col :span="12">
          <div class="nav-item next">
            <el-icon><ArrowRight /></el-icon>
            <router-link v-if="blogStore.blogAdjacentList[1].id !== 0"
                         :to="`/overview/detail/${blogStore.blogAdjacentList[1].id}`"
                         class="blog-navigation-title">
              {{ blogStore.blogAdjacentList[1].title }}
            </router-link>
            <span v-else>
              已经是最后一篇了~
            </span>
            <span class="label">下一篇：</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <blog-comment-edit :parent-id="0"/>

    <blog-comment />
  </div>
</template>

<script setup lang="ts">
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import BlogLabel from '@/components/Content/BlogLabel.vue'
import BlogCommentEdit from '@/components/Comment/BlogCommentEdit.vue'
import BlogComment from '@/components/Comment/BlogComment.vue'
import { MdPreview } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { useBlogStore } from '@/store/blog.ts'
import { useAppStore } from '@/store/app'
import { getBasicBlog } from '@/utils/blog/blogUtil.ts'
import { useRoute } from 'vue-router'
import { onMounted, watch } from 'vue'

const blogStore = useBlogStore()
const appStore = useAppStore()
const route = useRoute()

const currentUrl = new URL(window.location.href)

onMounted(async () => {
  const blogId = route.params.id as number
  await refreshBlog(blogId)
})

watch(() => route.params.id, async (newValue, oldValue) => {
  if (newValue !== oldValue) {
    await refreshBlog(newValue as number)
  }
})

const refreshBlog = async (blogId: number) => {
  blogStore.currentBlogId = blogId
  await blogStore.queryBlogById(blogId)
  await blogStore.queryBlogAdjacent(blogId)
}
</script>

<style scoped lang="scss">
@use "@/styles/blog/blog.detail.module.scss";

.blog-navigation {
  width: 100%;
  background-color: var(--color-copyright-bg);

  .nav-item {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .label {
    color: var(--el-text-color-secondary);
    font-size: 14px;
  }

  .blog-navigation-title {
    color: var(--el-text-color-primary);
    text-decoration: none;
    transition: color 0.3s;
    font-weight: 500;

    &:hover {
      color: var(--el-color-primary);
      text-decoration: underline;
    }
  }

  .prev {
    flex-direction: row;
    text-align: left;
  }

  .next {
    flex-direction: row-reverse;
    text-align: right;
  }
}
</style>
